<template>
  <!--  leaflet地图 -->
  <div id="map3"></div>
</template>

<script>
/* eslint-disable */
import { getCurrentInstance, onMounted, ref } from "vue";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "leaflet.echarts-layer";
import "@/api/leaflet-echarts.js";
import "@/api/echarts.source.js";
import * as echart from "echarts";
import pubsub from "pubsub-js";

import chartOptions from "@/api/chartsOption.js";
import 区界取反 from "@/GIS-json/区界取反.json";
import BlockList from "@/GIS-json/产业区块.json";
import townStreetList from "@/GIS-json/镇街线.json";
import JSdata from "../json/产业区块-导航.json";

export default {
  name: "地图",
  data() {
    return {
      data2: JSdata,
      subList: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let map3;
    // 图层列表
    let layerList = [];
    // echarts图表
    let chartMap;
    // 轮播标识下标
    let i = 0;
    // 地图面要素列表（三大产业区、镇街产业布局）
    let polygonList;
    // 图表配置列表
    let optionList = [
      chartOptions["图表地图-镇街"],
      chartOptions["图表地图-区块"],
    ];
    // 视觉中心点
    let ViewPoint = [22.72, 113.51]

    onMounted(() => {
      // 初始化地图对象
      initMap();
      polygonList = MapLayerMaker();

      // 地图渲染
      setMap();
    });

    // 初始化地图
    function initMap() {
      // 地图初始化,1
      map3 = L.map("map3", {
        preferCanvas: true, // 制图canvas优先显示
        attributionControl: false, // 隐藏信息控件
        zoomControl: false, // 隐藏缩放控件
        maxZoom: 13,
        minZoom: 11,
      });

      // 地图视图定位
      map3.setView(ViewPoint,10);

      // 添加遥感影像为初始底图
      L.tileLayer(
        "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png"
      ).addTo(map3);

      map3.on("click", (e) => {
        console.log(e.latlng);
      });
    }

    // 地图设置
    function setMap() {
      // 去除旧面要素
      if (layerList.length != 0) {
        layerList.forEach((element) => {
          map3.removeLayer(element);
        });
      }
      // 读取新面要素
      layerList = polygonList[0];
      // 加载新面要素
      if (layerList.length != 0) {
        layerList.forEach((element) => {
          element.addTo(map3);
        });
      }
    }

    // 绘制全部面要素
    function MapLayerMaker() {
      let list = [ draw22Block()];
      return list;
    }

    // 绘制22产业园区
    function draw22Block() {
      let list = [];
      // 绘制
      for (let index = 0; index < 22; index++) {
        // 绘制区块
        list.push(
          addPolygon(BlockList.features[index], "rgb(71,192,148)", 0.3, 1)
        );
      }
      return list;
    }

    // 添加面要素
    function addPolygon(element, color, opacity, border, fillColor = color) {
      let layer;
      element.geometry.rings.forEach((ring) => {
        // 坐标微调
        let rings = [];
        ring.forEach((point) => {
          rings.push([point[1] - 0.003, point[0] + 0.005]);
        });
        // 绘制面要素
        layer = L.polygon(rings, {
          color: color,
          fillOpacity: opacity ? opacity : 1,
          weight: border ? border : 0,
          opacity: 1,
          fillColor: fillColor,
        });
      });
      return layer;
    }
    return {};
  },

};
</script>

<style lang="less" scoped>
* {
  overflow: hidden;
}
#map3 {
  width: 100%;
  height: 100%;
}
</style>